<template>
  <div>
    <n-button>登录</n-button>
    <p class="year">{{ year }}</p><span>{{ users.age }}</span>
    <n-divider />
    <p>{{ user.name }}</p>
    <p>年份{{ comp }}</p>
    <n-divider />
    <n-button @click="openWord">Word</n-button>
  </div>
  <!-- <demo></demo> -->
</template>

<script setup lang="ts">
import { reactive, ref, computed } from 'vue';
import demo from './demo'
interface user {
  name: string,
  age: string | number
}
/**
  *  function ref<T>(value: T): Ref<UnwrapRef<T>>
  *   interface Ref<T> {
  *   value: T
  *  }
 */
const year = ref(0);
const users = ref<user>({
  name:'sss',
  age: 12
})
//reactive() 返回一个对象的响应式代理
const user = reactive({
  name: 'erer',
  age: 22,
  sex: '男',
});
const user1:user = reactive({
  name:'ytyt',
  age: 8
}) 
const user2 = reactive<user>({
  name:"plpl",
  age:'20'
})
const pdfModal = ref(false);
const pdfTitle = ref('word预览');
const pdfUrl = ref('');
const openWord = () => {
  pdfUrl.value = '/public/Jenkins.docx';
  pdfModal.value = true;
}

//computed()
//接受一个 getter 函数，返回一个只读的响应式 ref 对象，即 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。
const comp = computed(() => year.value + '年份')// 推导得到的类型：ComputedRef<string>

const comps = computed<string>(() => {
  return '1234567'
})
</script>

<style lang="scss" scoped>
@import '@/assets/style/mixin.scss';
.year{
  color: $red-color;
}
</style>
